<template>
  <div class="help" style="height: 100%;">
    <el-row class="demo-form-inline helpsrcah" :model="filters" style="text-align: right;padding-right: 50px;">
      <el-input
        class="serachtext"
        v-model="filters.searchTxt"
        @keyup.native.enter="search"
        :placeholder="$t('helpshow.content')"
        clearable
      ></el-input>
      <el-button type="primary" style="box-shadow: 4px 3px 8px #A3E3EF;color: #ffffff!important;
    background-color: #0862C3!important;
    border-color: #0862C3!important;" v-on:click="search" icon="el-icon-search" round>{{
        $t("helpshow.search")
      }}</el-button>
    </el-row>
    <div class="main" style="height: calc(100% - 60px);padding: 20px 15px 15px;box-sizing: border-box;">
      <div class="helpbox" style="height:100%;padding: 15px;box-sizing: border-box;">
        <ul v-for="(item, index) in text" class="content helpcontent">
          <li class="licss" :key="index">
            <div style="display:inline-block;vertical-align: top;">
              <img src="../../assets/help.png"/>
            </div>
            <div style="display:inline-block;vertical-align: top;">
              <h1 class="helpclor1">{{ item.title }}</h1>
              <p class="helpclor2">{{ item.txt }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        searchTxt: "",
      },
      text: [
        {
          title: "1.如何进入本网站？",
          txt:
            "本网站的网址是什么，建议您添加至收藏夹，建议使用谷歌，火狐浏览器，本网站对于ie10以下的网站，支持的不是很友好。",
        },
        {
          title: "2.如何修改网站的皮肤？",
          txt: "在网站的头部，可以进行更换，或者进入系统设置",
        },
        {
          title: "3.怎么修改密码？",
          txt:
            "本网站的网址是什么，建议您添加至收藏夹，建议使用谷歌，火狐浏览器，本网站对于ie7以下的网站，支持的不是很友好。",
        },
        {
          title: "4.是否可以更换自己的姓名？",
          txt:
            "本网站的网址是什么，建议您添加至收藏夹，建议使用谷歌，火狐浏览器，本网站对于ie7以下的网站，支持的不是很友好。",
        },
      ],
    };
  },
  watch:{
    'filters.searchTxt'(val){
      if(val.trim() === ''){
        // this.getBlock()
      }
    }
  },
  mounted(){
    // this.getBlock()
  },
  methods: {
    search() {
      let searchTxt = this.filters.searchTxt;
      if (searchTxt) {
        let searchData = this.text.filter(function (text) {
          return Object.keys(text).some(function (key) {
            return String(text[key]).toLowerCase().indexOf(searchTxt) > -1;
          });
        });
        return (this.text = searchData);
      }
    },
    //获取
    async getBlock() {
      try {
        let params = {
          Area: this.filters.Area,
          BlockName: this.filters.BlockName,
          page: this.page,
          limit: this.limit,
        }
        // let res = await this.$api.set.getBlock(params)
        // this.total = res.count; 
        // this.tables = res.data; 
      } catch (e) {
        console.log(e)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.demo-form-inline {
    text-align: right;
    padding-right: 50px;
    height: 60px;
    margin: 0 15px;
    line-height: 60px;
  .el-input {
    width: 300px;
  }
}
.content {
  border: 1px solid #55CEC7;
  padding: 20px 0;
  border-radius: 6px;
  margin: 30px 20px;
  h1 {
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    text-indent: 2rem;
  }
  p {
    text-indent: 2rem;
    line-height: 30px;
  }
}
.licss{
  padding:0px 10px
}
</style>
<style>
.serachtext > .el-input__inner{
     border: 0px;
        border-radius: 25px;
    }
</style>